<template>
    <div style="height:100%;width:100%;">
        <el-row class="mainContent el-row">
            <el-col :span="24">
                <el-form :inline="true" :model="formInline" class="demo-form-inline">
                    <el-form-item label="">
                        <el-input v-model="formInline.user" placeholder="用户名"></el-input>
                    </el-form-item>
                    <el-form-item label="">
                        <el-select v-model="formInline.region" placeholder="状态">
                            <el-option label="待开通" value="tobe"></el-option>
                            <el-option label="正常" value="normal"></el-option>
                            <el-option label="冻结" value="freeze"></el-option>
                            <el-option label="注销" value="logout"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="onSubmit">查询</el-button>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="add">创建</el-button>
                    </el-form-item>
                </el-form>
            </el-col>
            <el-table :data="tableData" highlight-current-row v-loading="listLoading">
                <el-table-column label="权限名称" width="180">
                    <template slot-scope="scope">
                        <span style="margin-left: 10px">{{ scope.row.name }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="创建时间" width="180">
                    <template slot-scope="scope">
                        <i class="el-icon-time"></i>
                        <span style="margin-left: 10px">{{ scope.row.creTime }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="ID" width="180">
                    <template slot-scope="scope">
                        <span style="margin-left: 10px">{{ scope.row.id }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="权限路径" width="180">
                    <template slot-scope="scope">
                        <span style="margin-left: 10px">{{ scope.row.url }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button size="mini" @click="edit(scope.$index, scope.row)">编辑</el-button>
                        <el-button size="mini" type="danger" @click="deleteRole(scope.$index, scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination layout="prev, pager, next" @current-change="handleCurrentChange" :page-size="sysList.pageSize" :total="total" style="float:right;">
            </el-pagination>
        </el-row>

        <el-dialog title="新增权限" :visible.sync="addUsersVisible" width="40%" :close-on-click-modal="false" :close-on-press-escape="false">
            <el-form :model="addForm" ref="addForm" status-icon label-width="100px" :rules="addFormRules" style="text-align:left">
                <el-form-item label="权限名称" prop="name">
                    <el-col :span="22">
                        <el-input v-model="addForm.name"></el-input>
                    </el-col>
                </el-form-item>
                <el-form-item label="url路径" prop="url">
                    <el-col :span="22">
                        <el-input v-model="addForm.url"></el-input>
                    </el-col>
                </el-form-item>
                <el-form-item label="父权限id" prop="parentId">
                    <el-col :span="22">
                        <el-input v-model="addForm.parentId"></el-input>
                    </el-col>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click.native="addUsersVisible = false">取 消</el-button>
                <el-button type="primary" @click.native="submitAdd('addForm')" :loading="addLoading">确 定</el-button>
            </div>
        </el-dialog>

        <el-dialog title="编辑权限" :visible.sync="editUsersVisible" width="40%" :close-on-click-modal="false" :close-on-press-escape="false">
            <el-form :model="editForm" ref="addForm" status-icon label-width="100px" :rules="editFormRules" style="text-align:left">
                <el-form-item label="权限ID">
                    <el-col :span="22" prop="id">
                        <el-input v-model="editForm.id"></el-input>
                    </el-col>
                </el-form-item>
                <el-form-item label="权限名称" prop="name">
                    <el-col :span="22">
                        <el-input v-model="editForm.name"></el-input>
                    </el-col>
                </el-form-item>
                <el-form-item label="权限路径" prop="url ">
                    <el-col :span="22">
                        <el-input v-model="editForm.url "></el-input>
                    </el-col>
                </el-form-item>
                <el-form-item label="父权限id" prop="parentId ">
                    <el-col :span="22">
                        <el-input v-model="editForm.parentId" type="textarea" placeholder="请输入内容" :autosize="{ minRows: 2, maxRows: 4}" resize="false"></el-input>
                    </el-col>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click.native="editUsersVisible = false">取 消</el-button>
                <el-button type="primary" @click.native="submitEdit('addForm')" :loading="editLoading">确 定</el-button>
            </div>
        </el-dialog>

    </div>
</template>
<script>
export default {
    data() {
        return {


            addLoading: false,
            editLoading: false,
            editUsersVisible: false,
            addForm: {},
            editForm: {

            },


            listLoading: false,
            formInline: {
                user: '',
                region: ''
            },
            sysList: {
                keyword: null,
                pageNo: 1,
                pageSize: 10,
            },
            total: 0,
            tableData: [],

            addFormRules: {
                roleName: [
                    { required: true, message: '请输入权限名称', trigger: 'blur' }]
            },
            editFormRules: {
                permissionName: [
                    { required: true, message: '请输入权限名称', trigger: 'blur' }],
            },
            addUsersVisible: false,



        }
    },
    created() {
        this.onloadlist()
    },
    methods: {


        onloadlist() {
            this.listLoading = true;
            var obj = {
                data: {
                    // name: this.formInline.user,
                    pageNo: this.sysList.pageNo,
                    pageSize: this.sysList.pageSize,
                }
            };
            this.$http('/sys/listPermission', obj).then(resp => {
                if (resp.code == 1) {
                    this.tableData = resp.data.list;
                    this.total = resp.data.total;
                    console.log(resp)
                }
                this.listLoading = false;
            })
        },
        handleCurrentChange(val) {
            this.sysList.pageNo = val;
            this.onloadlist();
        },

        onSubmit() {
            this.sysList.keyword = this.user;
            this.sysList.pageNo = 1;
            this.onloadlist();
        },


        add() {//添加角色
            // if(!this.$store.state.routes.routes.xtRoleAdd){
            // this.$message({
            //     message: '无权限',
            //     type: 'error'
            // })
            // return
            // }
            this.addForm = {}
            this.addUsersVisible = true
        },
        submitAdd(fn) {
            this.$refs[fn].validate((valid) => {
                if (valid) {
                    this.addLoading = true;
                    var obj = {
                        data: this.addForm
                    }
                    this.$http('/sys/addPermission', obj).then(resp => {
                        if (resp.code == 1) {
                            this.$message({
                                message: '新建成功',
                                type: 'success'
                            })
                        } else {
                            this.$message({
                                message: resp.msg,
                                type: 'error'
                            })
                        }
                        this.onloadlist()
                        this.addLoading = false;
                        this.addUsersVisible = false;
                    });

                } else {
                    return false;
                }
            });
        },
        edit(index, row) {
            // if(!this.$store.state.routes.routes.xtRoleEdit){
            // this.$message({
            //     message:'无权限',
            //     type:'error'
            // })
            // return
            // }
            // console.log(row)
            this.editForm.id = row.id
            this.editForm.name = row.name
             this.editForm.url=row.url
             this.editForm.parentId=row.parentid
            this.editUsersVisible = true;
        },
        submitEdit(fn) {
            this.$refs[fn].validate((valid) => {
                if (valid) {
                    this.editLoading = true;
                    var obj = {
                        data: this.editForm
                    }
                    console.log(this.editForm)
                    this.$http('/sys/editPermission', obj).then(resp => {
                        if (resp.code == 1) {
                            this.$message({
                                message: '修改成功',
                                type: 'success'
                            })
                        } else {
                            this.$message({
                                message: resp.msg,
                                type: 'error'
                            })
                        }
                        // this.getUsers()
                        this.editLoading = false;
                        this.editUsersVisible = false;
                    });

                } else {
                    return false;
                }
            });
        },
        deleteRole(index, row) {
            this.$confirm("确认删除该权限么?", "提示", {})
                .then(() => {
                    this.$http('/sys/deletePermission', { data: { id: row.id } }).then(resp => {
                        console.log(resp)
                        if (resp.code == 1) {
                            this.$message({
                                message: '删除成功',
                                type: 'success'
                            })
                        } else {
                            this.$message({
                                message: resp.msg,
                                type: 'error'
                            })
                        }
                        this.onloadlist()
                    })
                })
                .catch(() => { });
            // console.log(index, row);
        }
    }
}
</script>
<style>
.demo-form-inline {
    text-align: left;
}
</style>
